import { ModalForm } from '@ant-design/pro-components';
import { Timeline } from 'antd';
import moment from 'moment';
import type { CreateRecordType, ParkingRecordTableListItem } from '../types.d';
import { ParkingRecordStatus } from '../types.d';
import styles from '../style.less';

const handleTime = (val: string | number | Date) => {
  return val != undefined ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '暂无数据';
};
const handleInOutType = (val: CreateRecordType) => {
  switch (val) {
    case 'sensor':
      return '地磁设备';
    case 'patrol':
      return '巡检设备';
    case 'manual':
      return '人工确认';
  }
};
const ColoredText = (props: {
  text: string;
  color?: string;
  weight?: string | number;
  style?: React.CSSProperties;
}) => {
  const { text, color = '#000', weight = 'bold', style } = props;
  return (
    <span
      style={{
        fontWeight: weight === 'bold' ? weight : Number(weight || 500),
        color,
        ...style,
      }}
    >
      {text}
    </span>
  );
};

export default (props: { currRecord: ParkingRecordTableListItem }) => {
  const { currRecord } = props;
  const ifEnd = currRecord.isEnded;
  const RecordStatus =
    currRecord.status == ParkingRecordStatus.NORMAL
      ? { text: '正常', color: '#666', des: false }
      : { text: '异常', color: 'red', des: true };
  return (
    <ModalForm
      className={styles.modalTime}
      width="50vw"
      title="停车记录详情"
      submitter={false}
      trigger={<a>记录详情</a>}
    >
      <Timeline mode="alternate" pending={!ifEnd && '停车中'}>
        <Timeline.Item label={handleTime(currRecord.inTime)} color="green">
          <h4>车辆驶入</h4>
          <div>
            当前驶入状态由
            <ColoredText text={handleInOutType(currRecord.inType)} />
            上报
          </div>
        </Timeline.Item>
        <Timeline.Item label={handleTime(currRecord.createTime)} color="green">
          <h4>记录创建</h4>
          <div>
            当前记录状态 <ColoredText text={RecordStatus.text} color={RecordStatus.color} />
          </div>
          {RecordStatus.des && (
            <ColoredText text={currRecord.description} color="#555" weight={300} />
          )}
        </Timeline.Item>
        {currRecord.patrolRecords.map((item, index) => (
          <Timeline.Item position="left" label={handleTime(item.patrolTime)} color="green">
            <h4>第 {index + 1} 次巡检</h4>
            <ul style={{ listStyleType: 'disc', textAlign: 'left' }}>
              <li>巡检设备：{item.deviceSn}</li>
              <li>当前车牌：{item.plateNumber}</li>
              <li>巡检记录：{item.recordId}</li>
            </ul>
          </Timeline.Item>
        ))}
        {ifEnd && (
          <Timeline.Item
            position="right"
            label={handleTime(currRecord.outTime)}
            color={currRecord.outTime ? 'green' : 'red'}
          >
            车辆驶出
          </Timeline.Item>
        )}
      </Timeline>
    </ModalForm>
  );
};
